import Caret from "./Caret";

const UserTypings = ({
  userInput,
  className,
  words,
}: {
  userInput: string;
  className: string;
  words: string;
}) => {
  const typedCharacters = userInput.split("");
  return (
    <div className={className}>
      {typedCharacters.map((char, index) => {
        return <Character char={char} key={index} expected={words[index]} />;
      })}
      <Caret />
    </div>
  );
};

const Character = ({ char, expected }: { char: string; expected: string }) => {
  const isCorrect = char === expected;
  const isWhitespace = expected === " ";
  return (
    <span
      className={cn({
        "text-green-400": isCorrect,
        "text-red-400": !isCorrect && !isWhitespace,
        "bg-red-400": isWhitespace && !isCorrect,
      })}
    >
      {expected}
    </span>
  );
};

function cn(classes: { [key: string]: boolean }) {
  return Object.entries(classes)
    .filter(([, value]) => value)
    .map(([key]) => key)
    .join(" ");
}

export default UserTypings;
